function insertBefore(ownwer, el, anchor, className, span, width, align, innerHTML) {
    function cells(obj, className, span, width, align, innerHTML) {
        obj.className = className
        if (!(span == null)) { obj.rowSpan = span.row; obj.colSpan = span.col; } else { obj.rowSpan = 1; obj.colSpan = 1; }
        if (!(width == null)) obj.width = width; else;
        if (!(align == null)) obj.align = align; else;
        obj.innerHTML = innerHTML
    }

    var cellDest = document.createElement(el)
    cells(cellDest, className, span, width, align, innerHTML)
    ownwer.insertBefore(cellDest, anchor)

    return cellDest
}

function getPercentValues(val, min, max) {
    var jsonRes = { "fact": 0, "normal": 0 }

    if (!(typeof (val) == "undefined"))
        jsonRes["fact"] = parseInt(((val - min) / (max - min)) * 100)
    else
        ;

    jsonRes["normal"] = jsonRes["fact"]

    if (jsonRes["fact"] > 100)
        jsonRes["normal"] = 100
    else
        ;

    if (jsonRes["fact"] < 0)
        jsonRes["normal"] = 0
    else
        ;

    return jsonRes
}

function diagram(cellDest, percentValues, bgcolorChnl) {
    if (!(percentValues.hasOwnProperty("previous") == true)) {
        switch (percentValues["current"]["normal"]) {
            case 0:
                break
            case 100:
                cellDest.align = "center"
                cellDest.innerHTML = '<div style="background:' + bgcolorChnl + '; width: 99%; margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' + bgcolorChnl + ', endColorstr=' + jGradientColorEnd(bgcolorChnl) + ', GradientType=1);">&nbsp;</div>'
                //cellDest.innerHTML = '<div style="background:' + bgcolorChnl + '; width: 99%; margin: 1px; padding: 1px;">&nbsp;</div>'
                break
            default:
                cellDest.align = "left"
                cellDest.innerHTML = '<div style="background:' + bgcolorChnl + '; width:' + percentValues["current"]["normal"] + '%; margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' + bgcolorChnl + ', endColorstr=' + jGradientColorEnd(bgcolorChnl) + ', GradientType=1);">&nbsp;</div>'
                //cellDest.innerHTML = '<div style="background:' + bgcolorChnl + '; width:' + percentCurrentNormal + '%; margin: 1px; padding: 1px;">&nbsp;</div>'
        }
    }
    else
        if (percentValues.hasOwnProperty("previous") == true) {
            var bgcolorDeviation = percentValues["current"]["normal"] > percentValues["previous"]["normal"] ? COLOR_DEVIATION_PLUS : percentValues["current"]["normal"] < percentValues["previous"]["normal"] ? COLOR_DEVIATION_MINUS : bgcolorChnl

            switch (percentValues["current"]["normal"]) {
                case 0:
                    switch (percentValues["previous"]["normal"]) {
                        case 0:
                            break
                        case 100:
                            cellDest.align = "left"
                            cellDest.innerHTML = '<div style="background:' + bgcolorDeviation + '; width: 99%; margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' + bgcolorDeviation + ', endColorstr=' + jGradientColorEnd(bgcolorDeviation) + ', GradientType=1);">&nbsp;</div>'
                            break
                        default:
                            cellDest.align = "left"
                            cellDest.innerHTML = '<div style="background:' + bgcolorDeviation + '; width: ' + percentValues["previous"]["normal"] + '%; margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' + bgcolorDeviation + ', endColorstr=' + jGradientColorEnd(bgcolorDeviation) + ', GradientType=1);">&nbsp;</div>'
                    }
                    break
                case 100:
                    switch (percentValues["previous"]["normal"]) {
                        case 0:
                            cellDest.align = "center"
                            cellDest.innerHTML = '<div style="background:' + bgcolorDeviation + '; width: 99%; margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' + bgcolorDeviation + ', endColorstr=' + jGradientColorEnd(bgcolorDeviation) + ', GradientType=1);">&nbsp;</div>'
                            break
                        case 100:
                            cellDest.align = "center"
                            cellDest.innerHTML = '<div style="background:' + bgcolorChnl + '; width: 99%; margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' + bgcolorChnl + ', endColorstr=' + jGradientColorEnd(bgcolorChnl) + ', GradientType=1);">&nbsp;</div>'
                            break
                        default:
                            cellDest.align = "left"
                            cellDest.innerHTML = '<div style="float: left; width: ' + percentValues["previous"]["normal"] + '%;  margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' + bgcolorChnl + ', endColorstr=' + jGradientColorEnd(bgcolorChnl) + ', GradientType=1);">&nbsp;</div>'
                            cellDest.innerHTML += '<div style="float: left; width: ' + (99 - percentValues["previous"]["normal"]) + '%;  margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' + bgcolorDeviation + ', endColorstr=' + jGradientColorEnd(bgcolorDeviation) + ', GradientType=1);">&nbsp;</div>'
                    }
                    break
                default:
                    switch (percentValues["previous"]["normal"]) {
                        case 0:
                            cellDest.align = "left"
                            cellDest.innerHTML = '<div style="background:' + bgcolorDeviation + '; width: ' + percentValues["current"]["normal"] + '%; margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' + bgcolorDeviation + ', endColorstr=' + jGradientColorEnd(bgcolorDeviation) + ', GradientType=1);">&nbsp;</div>'
                            break
                        case 100:
                            cellDest.align = "left"
                            cellDest.innerHTML = '<div style="float: left; width: ' + percentValues["current"]["normal"] + '%;  margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' + bgcolorChnl + ', endColorstr=' + jGradientColorEnd(bgcolorChnl) + ', GradientType=1);">&nbsp;</div>'
                            cellDest.innerHTML += '<div style="float: left; width: ' + (99 - percentValues["current"]["normal"]) + '%;  margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' + bgcolorDeviation + ', endColorstr=' + jGradientColorEnd(bgcolorDeviation) + ', GradientType=1);">&nbsp;</div>'
                            break
                        default:
                            cellDest.align = "left"
                            cellDest.innerHTML = '<div style="float: left; width: ' + percentValues["current"]["normal"] + '%;  margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' + bgcolorChnl + ', endColorstr=' + jGradientColorEnd(bgcolorChnl) + ', GradientType=1);">&nbsp;</div>'
                            if (!(percentValues["current"]["normal"] == percentValues["previous"]["normal"]))
                                cellDest.innerHTML += '<div style="float: left; width: ' + Math.abs(percentValues["current"]["normal"] - percentValues["previous"]["normal"]) + '%;  margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' + bgcolorDeviation + ', endColorstr=' + jGradientColorEnd(bgcolorDeviation) + ', GradientType=1);">&nbsp;</div>'
                            else
                                ;
                            //<th class="TD_GENERAL" align="left">
                            //    <div style="float: left; width: <% =percentPreviousNormal %>%;  margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=<% =bgcolorChnl %>, endColorstr=<% =jGradientColorEnd (bgcolorChnl) %>, GradientType=1);">&nbsp;</div>
                            ////    <!-- <div style="float: left; width: <% =percentDifference %>%;  margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=<% =bgcolorDeviation %>, endColorstr=<% =jGradientColorEnd (bgcolorChnl) %>, GradientType=1);">&nbsp;</div> -->
                            //    <div style="float: left; width: <% =Abs(percentCurrent - percentPrevious) %>%;  margin: 1px; padding: 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=<% =bgcolorDeviation %>, endColorstr=<% =jGradientColorEnd (bgcolorChnl) %>, GradientType=1);">&nbsp;</div>
                            //</th>
                    }
            }
        }
        else
            ;
}